<template>
  <div class="box">
    <template v-for="i in imgList" :key="i.id">
      <div @click="userChoice(i)">
        <img :src="i.img" alt=""/>
      </div>
    </template>

  </div>
</template>

<script setup>
console.log('this is a test')
const cxt = getCurrentInstance() // context === vue2 this
const bus = cxt.appContext.config.globalProperties.$bus
// ps: 目前的课程展演主要是14年-24年
const imgList = reactive([
  { id: 2014, img: 'https://kanekikeh.online/A/CoursePerformance/23/NiuLogo.png', url: '#' },
  { id: 2015, img: 'https://kanekikeh.online/A/CoursePerformance/22/JZLogo.png', url: '#' },
  { id: 2016, img: 'https://kanekikeh.online/A/CoursePerformance/21/ZJLogo.jpg', url: '#' },
  { id: 2017, img: 'https://kanekikeh.online/A/CoursePerformance/20/PXLogo.png', url: '#' },
  { id: 2018, img: 'https://kanekikeh.online/A/CoursePerformance/18/JXLogo.png', url: '#' },
  { id: 2019, img: 'https://kanekikeh.online/A/CoursePerformance/19/CZLogo.png', url: '#' },
  { id: 2020, img: 'https://kanekikeh.online/A/CoursePerformance/20/PXLogo.png', url: '#' },
  { id: 2021, img: 'https://kanekikeh.online/A/CoursePerformance/21/ZJLogo.jpg', url: '#' },
  { id: 2022, img: 'https://kanekikeh.online/A/CoursePerformance/22/JZLogo.png', url: '#' },
  { id: 2023, img: 'https://kanekikeh.online/A/CoursePerformance/23/NiuLogo.png', url: '#' },
])

const userChoice = ((val) => {
  bus.emit('Performance',val)
})



</script>

<style scoped lang="scss">
@keyframes circleDynamicShadow {
  0% {
    box-shadow: 0px 0px 10px 0px rgba(193, 57, 80, 0.8);
  }

  100% {
    box-shadow: 0px 0px 10px 20px rgba(193, 57, 80, 0%);
  }
}

.box {
  width: 30vw;
  height: 10vh;
  margin-top: auto;
  margin-left: 1vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8vw;
}

img {
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  background-position: center;
  background-size: cover;
  transition: all 0.5s ease 0s;
  border: 1px solid #ccc ;
}

img:hover {
  cursor: pointer;
  transform: scale(1.2);
  transition: all 0.5s ease 0s;
  animation: circleDynamicShadow 2s linear infinite;
  -webkit-animation: circleDynamicShadow 2s linear infinite;
  -moz-animation: circleDynamicShadow 2s linear infinite;
}
</style>